<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>v-on指定事件</title>
	<script type="text/javascript" src="vue.js"></script>
</head>

<body>
	<div id="app">
        <h1>计时器</h1>
        <button @click="increment">递增</button>
        {{count}}
        <button @click="decrement">递减</button>
	</div>


</body>
<script>
	//vue是一个类 使用的是Vue的实例
	const vm = new Vue({
		//vue使用的模版页
		//vue在工作时，先将el对应的模版加载到内存VNode(虚拟DOM)
		//在vue的生命周期中,负责解析虚拟DOM,最终渲染到页面
		el: "#app",
		/*data:function(){
			return{
				
			}
		} */
		//es6中对于方法的简化写法 和上面的es5的写法等价
		data() {
			return {
				//定义我们程序开发过程中需要声明的属性
                messge: "hello world",
                count:0,
				linkN_1: "https://baidu.com",
				a_txt: "百度一下 你就知道",
				imgNo_1: "https://t7.baidu.com/it/u=1699454570,2952675447&fm=85&app=131&size=f242,150&n=0&f=JPEG&fmt=auto?s=1BF6E816C8B47F800B7547C402007026&sec=1684342800&t=d19f34b3eb6bd585ccd921a1c3f272a8"
			}
        },
        methods:{
            //自定义方法
            decrement(){
                if(this.count>0){
                    this.count--
                }
            },
            increment(){
              this.count++
            }
        }
	})

</script>

</html>